<template>
  <el-container class="mall_brand-info_index">
    <el-main>
      <el-card shadow="never" class="commercial-tenant-info-container">
        <div class="commercial-tenant-container">
          <div class="left-container">
            <el-card shadow="never" class="commercial-tenant-list-card">
              <el-tree
                ref="tree"
                :data="formatList"
                :props="defaultProps"
                :default-expanded-keys="defaultList"
                :highlight-current="true"
                :check-on-click-node="true"
                :expand-on-click-node="true"
                node-key="id"
                @node-click="handleNodeClick"
              />
            </el-card>
          </div>
          <div class="right-container">
            <el-card
              shadow="never"
              class="commercia-tenant-list-title tableCard"
            >
              <vxe-toolbar
                :custom="{ icon: 'el-icon-s-operation' }"
                :refresh="{ query: getList }"
                print
              >
                <template v-slot:buttons>
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-plus"
                    @click="openModal('', false)"
                  >添加</el-button>
                </template>
              </vxe-toolbar>
              <vxe-table
                ref="xTree"
                border
                stripe
                resizable
                highlight-hover-row
                :loading="loading"
                :auto-resize="true"
                :data="brandList"
                height="500"
                :print-config="{}"
              >
                <vxe-table-column type="seq" align="center" width="50" title=" " />
                <vxe-table-column
                  field="insideArea"
                  width="100"
                  align="center"
                  title="Logo"
                  slots="default"
                >
                  <template slot-scope="scope">
                    <img :src="scope.row.logo" alt="" class="logoImg">
                  </template>
                </vxe-table-column>
                <vxe-table-column
                  field="nameCn"
                  width="150"
                  align="left"
                  title="中文名"
                />
                <vxe-table-column
                  field="nameEn"
                  width="150"
                  align="left"
                  title="英文名"
                />
                <vxe-table-column
                  field="company"
                  title="品牌公司"
                  align="left"
                  min-width="250"
                />
                <vxe-table-column
                  field="birthPlace"
                  title="发源地"
                  align="left"
                  width="150"
                />
                <vxe-table-column
                  field="publishStatus"
                  width="80"
                  align="center"
                  title="状态"
                >
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.publishStatus"
                      :inactive-value="0"
                      :active-value="1"
                      active-text
                      inactive-text
                      @change="changeState(scope)"
                    />
                  </template>
                </vxe-table-column>
                <vxe-table-column
                  title="操作"
                  fixed="right"
                  width="140"
                  align="center"
                  slots="default"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      @click="openModal(scope.row.id, true)"
                    >查看</el-button>
                    <el-button
                      v-if="scope.row.publishStatus == 0"
                      type="text"
                      size="mini"
                      @click="openModal(scope.row.id, false)"
                    >编辑</el-button>
                    <el-button
                      v-if="scope.row.publishStatus == 0"
                      type="text"
                      size="mini"
                      @click="del(scope.row.id)"
                    >删除</el-button>
                  </template>
                </vxe-table-column>
              </vxe-table>
              <vxe-pager
                :current-page.sync="tableCurrentPage"
                :page-size.sync="pageSize"
                :total="total"
                :layouts="[
                  'PrevJump',
                  'PrevPage',
                  'Number',
                  'NextPage',
                  'NextJump',
                  'FullJump',
                  'Total',
                ]"
                @page-change="getList"
              />
            </el-card>
          </div>
        </div>
      </el-card>
    </el-main>
    <el-dialog
      v-if="dialogVisible"
      width="60%"
      :title="addTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addForm"
        :model="addParams"
        :rules="addRules"
        label-width="9rem"
      >
        <div class="base-info">
          <div class="icon-upload">
            <label><span>*</span> Logo：</label>
            <upload
              ref="upload"
              :limit="1"
              :file-list="fileList"
              :disabled="diabledEdit"
              :file-filter="filterImgType"
            />
            <label class="mt20"><span>*</span> 品牌介绍：</label>
            <el-input
              v-model="addParams.introduce"
              type="textarea"
              :disabled="diabledEdit"
              :rows="10"
            />
          </div>
          <div class="basics-info">
            <el-row>
              <el-col :span="12">
                <el-form-item class="redLabel" label="所属业态：">
                  <el-cascader
                    v-model="addParams.formatId"
                    :options="formatList"
                    :disabled="diabledEdit"
                    :props="props"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="assemblyShop" label="是联合品牌：">
                  <el-select v-model="addParams.assemblyShop" :disabled="diabledEdit">
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="nameCn" label="品牌中文名：">
                  <el-input v-model="addParams.nameCn" :disabled="diabledEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="nameEn" label="品牌英文名：">
                  <el-input v-model="addParams.nameEn" :disabled="diabledEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="company" label="品牌公司：">
                  <el-input v-model="addParams.company" :disabled="diabledEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="addr" label="公司地址：">
                  <el-input v-model="addParams.addr" :disabled="diabledEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="tel" label="公司电话：">
                  <el-input v-model="addParams.tel" :disabled="diabledEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="brandLevel" label="品牌等级：">
                  <el-select v-model="addParams.brandLevel" :disabled="diabledEdit">
                    <el-option
                      v-for="(item, index) in brandLevelList"
                      :key="index"
                      :value="item.value"
                      :label="item.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="legalPerson" label="联系人：">
                  <el-input v-model="addParams.legalPerson" :disabled="diabledEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="birthPlace" label="品牌发源地：">
                  <el-input v-model="addParams.birthPlace" :disabled="diabledEdit" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="品牌风格：" prop="styles">
                  <div>
                    <span v-if="!disabled && !diabledEdit" class="blueBtn mr10" @click="openStyleDialog">选择</span>
                    <el-tag
                      v-for="tag in addParams.styles"
                      :key="tag.id"
                      :closable="!disabled && !diabledEdit"
                      :disable-transitions="false"
                      class="mr10"
                      @close="handleClose(tag)"
                    >
                      {{ tag.name }}
                    </el-tag>
                  </div>
                </el-form-item>
                <!-- <el-transfer
                  v-model="params.styleIds"
                  filterable
                  :filter-method="filterMethod"
                  :props="{ key: 'id',label: 'name' }"
                  filter-placeholder="请输入品牌风格"
                  :data="brandStyleList"
                  @change="changeStyleIds"
                /> -->
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="!diabledEdit" type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="styleDialog" title="选择" :close-on-click-modal="false" :visible.sync="styleDialog" append-to-body>
      <vxe-table
        ref="listTree1"
        border
        resizable
        highlight-hover-row
        :auto-resize="true"
        :data="brandStyleList"
        width
        max-height="300"
        highlight-current-row
        text-algin="center"
      >
        <vxe-table-column type="checkbox" width="100" />
        <vxe-table-column field="name" title="品牌风格" />
      </vxe-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="styleDialog = false">取消</el-button>
        <el-button v-if="!disabled" type="primary" @click="clickStyleSure">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Upload from '@/components/upload'
import { getVersionstatTreeList } from '@/api/tenement'
import { searchAllDictionaries } from '@/api/public'
import {
  changeStatus,
  getBrandPageList,
  getBrand,
  modifyBrand,
  addBrand,
  delBrand
} from '@/api/brand'
export default {
  components: {
    Upload
  },
  data() {
    return {
      filterImgType: [
        'jpg',
        'jpeg',
        'png',
        'icon',
        'gif',
        'bmp',
        'JPG',
        'JPEG',
        'PNG',
        'ICON',
        'GIF',
        'BMP'
      ],
      fileList: [],
      styleDialog: false,
      brandStyleList: [],
      addTitle: '添加',
      props: {
        children: 'children',
        value: 'id',
        label: 'name',
        emitPath: false
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      addParams: {},
      defaultList: [],
      addRules: {
        nameCn: [
          { required: true, message: '请填写品牌中文名', trigger: 'blur' }
        ]
      },
      formatList: [],
      brandList: [],
      formatId: '',
      disabled: false,
      dialogVisible: false,
      diabledEdit: false,
      loading: false,
      tableCurrentPage: 1,
      pageSize: 20,
      brandLevelList: [],
      total: 0
    }
  },
  created() {
    this.getTreeInfo()
  },
  methods: {
    handleNodeClick(data) {
      if (!data.children) {
        this.formatId = data.id
        this.tableCurrentPage = 1
        this.getList()
      }
    },
    openModal(id, bool) {
      this.diabledEdit = bool
      if (id === '' && this.formatId === '') {
        this.$message.error('请选择业态')
        return false
      }
      this.addParams = {}
      this.fileList = []
      id === '' ? this.addTitle = '添加' : this.addTitle = '编辑'
      searchAllDictionaries({ type: 'brand_level' }).then((res) => {
        this.brandLevelList = res
        this.dialogVisible = true
        if (id) {
          this.getInfo(id)
        }
      })
    },
    openStyleDialog() {
      getVersionstatTreeList({ type: 2, parentId: '0' }).then(res => {
        this.styleDialog = true
        this.$nextTick(() => {
          this.addParams.styles.forEach((item, index) => {
            res.forEach((it, idx) => {
              if (item.id === it.id) {
                this.$refs.listTree1.setCheckboxRow(res[idx], true)
              }
            })
          })
          this.brandStyleList = res
        })
      })
    },
    clickStyleSure() {
      this.addParams.styles = this.$refs.listTree1.getCheckboxRecords().map(item => {
        return { name: item.name, id: item.id }
      })
      if (this.addParams.styles.length === 0) {
        this.$message.error('请选择品牌风格')
        return false
      }
      this.styleDialog = false
    },
    getList() {
      getBrandPageList({
        pageNum: this.tableCurrentPage,
        pageSize: this.pageSize,
        formatId: this.formatId
      }).then((response) => {
        this.brandList = response.records
        this.total = response.total
      })
    },
    getTreeInfo() {
      getVersionstatTreeList({
        type: '1',
        parentId: '0'
      }).then((response) => {
        this.formatList = [
          { children: null, id: '', name: '全部' },
          ...response
        ]
        this.getList()
      })
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delBrand(id).then((response) => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    getInfo(id) {
      getBrand(id).then((response) => {
        this.addParams = response
        this.addParams.brandLevel = response.brandLevel.toString()
        if (this.addParams.logo) {
          this.fileList = [
            {
              url: this.addParams.logo
            }
          ]
        }
      })
    },
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addParams.styleIds = this.addParams.styles.map(item => item.id)
          if (this.$refs.upload.key && this.$refs.upload.key.length < 1) {
            this.$message.error('品牌logo不能为空')
            return
          }
          if (
            this.addParams.introduce === '' ||
            this.addParams.introduce === undefined
          ) {
            this.$message.error('品牌介绍不能为空')
            return
          }
          this.addParams.logo = this.$refs.upload.key[0].urlName
          if (this.addParams.id) {
            modifyBrand(this.addParams).then((response) => {
              this.$message.success('修改成功')
              this.dialogVisible = false
              this.getList()
            })
          } else {
            addBrand(this.addParams).then((response) => {
              this.$message.success('添加成功')
              this.dialogVisible = false
              this.getList()
            })
          }
        }
      })
    },
    changeState(scope) {
      this.brandList[scope.seq - 1].publishStatus =
        scope.row.publishStatus === 1 ? 0 : 1
      changeStatus({
        id: scope.row.id,
        status: scope.row.publishStatus === 1 ? 0 : 1
      }).then((response) => {
        this.brandList[scope.seq - 1].publishStatus =
          scope.row.publishStatus === 1 ? 0 : 1
        this.$message.success(
          scope.row.publishStatus === 0 ? '禁用成功' : '启用成功'
        )
      })
    }
  }
}
</script>

<style lang="scss">
.mall_brand-info_index {
  .label-zj{
    .el-form-item__label{
       line-height: 25px;
    }
  }
  .commercial-tenant-info-container {
    margin-left: 20px;
    width: 100%;
  }
  .map-info {
    width: 100%;
    height: 300px;
  }
  .commercial-tenant-container {
    display: flex;
    .left-container {
      margin-right: 20px;
      .commercial-tenant-list-card {
        height: 100%;
        // margin-top: 20px;
        width: 150px;
      }
    }
    .right-container {
      width: calc(100% - 190px);
      .commercia-tenant-list-title {
        margin-bottom: 20px;
        width: 100%;
        .el-card__body {
          padding: 0;
        }
      }
    }
    .logoImg {
      width: 32px;
      height: 32px;
    }
  }
  .base-info {
    display: flex;
    margin-bottom: 20px;
    .icon-upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;
      > label {
        margin-bottom: 10px;
        span {
          color: #ff4949;
        }
      }
      .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 5px;
        margin: 0 30px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 150px;
          height: 150px;
          line-height: 150px;
          text-align: center;
        }
      }
    }
    .basics-info {
      width: 100%;
    }
  }
}
</style>
